<template>
    <div class="card-box">
        <el-row>
            <el-col :md="24">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="" class="mt_5">
                        <el-input v-model="formInline.user" placeholder="IP"></el-input>
                    </el-form-item>
                    <el-button type="primary">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary">
                        <i class="el-icon-refresh"></i>
                    </el-button>
                    <el-button type="primary" @click="dialogVisible = true">事件刷选</el-button>
                </el-form>
                <el-dialog title="事件筛选" :visible.sync="dialogVisible" width="40%">
                    <el-form :model="ruleForm" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                        <el-form-item label="API接口：">
                            <el-select v-model="ruleForm.API" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in API" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否成功：">
                            <el-select v-model="ruleForm.success" filterable placeholder="请选择" class="w100">
                                <el-option v-for="item in success" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary">查询</el-button>
                    </span>
                </el-dialog>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="api" label="API接口名称" width="120">
            </el-table-column>
            <el-table-column prop="time" label="调用时间" width="160">
            </el-table-column>
            <el-table-column prop="ip" label="调用IP" width="128">
            </el-table-column>
            <el-table-column label="调用参数" width="400">
                <template slot-scope="scope">
                    <div @click="getCarrierData(scope.row)" class="pointer">
                        <span>{{ scope.row.canshu}}<i :class="scope.row.arrow" v-if="scope.row.allcanshu"></i></span>
                        <input type="hidden" :value="scope.row.allcanshu">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="success" label="成功">
            </el-table-column>
            <el-table-column prop="back" label="返回接口" width="400">
            </el-table-column>
      </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                formInline: {
                    user: ''
                },
                dialogVisible: false,
                ruleForm: {
                    API: '',
                    success: '',
                },
                API: [
                    {
                        value: '选线1',
                        label: '联通'
                    },
                    {
                        value: '选线2',
                        label: '电信'
                    }
                ],
                success: [
                    {
                        value: '选线1',
                        label: '联通'
                    },
                    {
                        value: '选线2',
                        label: '电信'
                    }
                ],
                tableData: [
                    {
                        id: 1,
                        api: '单卡停机复机',
                        time: '2018-06-06 18:20:42',
                        ip: '180.121.196.127',
                        canshu: '{"iccid":"89860401101701240259","status":"resume","app_id":"40511686364783","timestamp":"5555555"}',
                        asd: '{"iccid":"89860401101701240259","status":"resume","app_id":"40511686364783","timestamp":"5555555"}',
                        allcanshu: '{"app_id":"40511686364783","iccid":"89860617080068741246","status":"resume","timestamp":"1527648489","sign":"8b81c2fc2a7174872371963af28ca1a98c728a90bb482ae6f4e8b841941f99f0"} ',
                        success: '否',
                        back: '{"code":1003,"message":"时间戳格式不对","status":401}',
                        arrow: 'el-icon-caret-right'
                    },
                    {
                        id: 2,
                        api: '单卡停机复机',
                        time: '2018-06-06 18:20:42',
                        ip: '180.121.196.127',
                        canshu: '{"iccid":"89860401101701240259","status":"resume","app_id":"40511686364783","timestamp":"5555555"}',
                        asd: '{"iccid":"89860401101701240259","status":"resume","app_id":"40511686364783","timestamp":"5555555"}',
                        allcanshu: '{"app_id":"405116863647831111111111111111111111111111111111111111111","iccid":"89860617080068741246","status":"resume","timestamp":"1527648489","sign":"8b81c2fc2a7174872371963af28ca1a98c728a90bb482ae6f4e8b841941f99f0"} ',
                        success: '否',
                        back: '{"code":1003,"message":"时间戳格式不对","status":401}',
                        arrow: 'el-icon-caret-right'
                    },
                    {
                        id: 3,
                        api: '单卡停机复机',
                        time: '2018-06-06 18:20:42',
                        ip: '180.121.196.127',
                        canshu: '{"iccid":"89860401101701240259","status":"resume","app_id":"40511686364783","timestamp":"5555555"}',
                        asd: '{"iccid":"89860401101701240259","status":"resume","app_id":"40511686364783","timestamp":"5555555"}',
                        allcanshu: '',
                        success: '否',
                        back: '{"code":1003,"message":"时间戳格式不对","status":401}',
                        arrow: 'el-icon-caret-right'
                    }
                ]
            }
        },
        methods: {
            getCarrierData(goods) {
                if (goods.allcanshu) {
                    if (goods.allcanshu != goods.canshu) {
                        goods.canshu = goods.allcanshu
                        goods.arrow = 'el-icon-caret-top'
                    } else {
                        goods.canshu = goods.asd
                        goods.arrow = 'el-icon-caret-right'
                    }
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .w100{
        width: 100%;
    }

    .pointer {
        cursor: pointer;
    }
</style>